import React from "react";
import {Avatar, Group, Text, Card, UnstyledButton, CardSection} from "@mantine/core";
import {IconChevronRight} from "@tabler/icons-react";

import classes from "./GithubCard.module.css";

export interface GithubCardProps {
  name: string;
  src: string;
  site: string;
}

export const GithubCard = ({name, src, site}: GithubCardProps) => {
  return (
    <Card withBorder radius="md">
      <CardSection py="xs" px="md" withBorder>
        <Group justify="space-between">
          <Text fw={500}>{name}</Text>
          <Avatar src={src} variant="filled" radius="xl" />
        </Group>
      </CardSection>

      <CardSection>
        <UnstyledButton
          h="100%"
          w="100%"
          className={classes.section}
          px="md"
          py="xs"
          display="block"
          component="a"
          href={site}
        >
          <Group justify="space-between">
            <Text size="xs" c="gray">
              查看详情
            </Text>
            <IconChevronRight size={12} />
          </Group>
        </UnstyledButton>
      </CardSection>
    </Card>
  );
};
